<template>
    <view>
        <!-- 列表 -->
        <view class="listBox">
            <!-- 新订单 -->
            <view class="back_fff list">
                <view class="flex justify_content_between">
                    <view class="type f_36" style="color: #ff6401">￥5.90</view>
                    <view class="f_28 cl_999CA3">
                        约
                        <text class="cl_333A47">12</text>
                        km
                    </view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view>
                    <text class="name cl_999CA3 f_20">0.9km</text>
                    <text class="iphone cl_999CA3 f_28">贵阳市南明区青山路青山领域东侧</text>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="name cl_999CA3 f_20">0.9km</text>
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                    <text class="smaz">上门安装</text>
                </view>
                <view class="addBtn" @click="OrderDetailsReceiver(0)">接单</view>
            </view>
            <!-- 进行中 -->
            <view class="back_fff list">
                <view class="flex justify_content_between">
                    <view class="flex">
                        <!-- <view class="titleTip">急</view> -->
                        <view class="type f_36" style="color: #ff6401">￥5.90</view>
                    </view>
                    <view class="f_28">
                        20:30
                        <text class="cl_999CA3">送达</text>
                    </view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                </view>
                <view class="flex">
                    <view class="phoneBtn">
                        <!--  -->
                        <view style="text-align: center">
                            <image class="icon_dh" src="@/static/imgs/icon-dh.png" mode="widthFix"></image>
                            客户
                        </view>
                    </view>
                    <view class="addBtn1" @click="OrderDetailsReceiver(1)">已到达目的地</view>
                </view>
            </view>
            <!-- 服务中 -->
            <view class="back_fff list">
                <view class="flex justify_content_between">
                    <view class="flex">
                        <!-- <view class="titleTip">急</view> -->
                        <view class="type f_36" style="color: #ff6401">￥5.90</view>
                    </view>
                    <view class="f_28 cl_3377FF">服务中</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                </view>
                <view class="flex">
                    <view class="phoneBtn">
                        <!--  -->
                        <view style="text-align: center">
                            <image class="icon_dh" src="@/static/imgs/icon-dh.png" mode="widthFix"></image>
                            客户
                        </view>
                    </view>
                    <view class="addBtn1" @click="OrderDetailsReceiver(2)">服务完成</view>
                </view>
            </view>
            <!-- 已超时 -->
            <view class="back_fff list">
                <view class="flex justify_content_between">
                    <view class="flex">
                        <view class="titleTip">急</view>
                        <view class="type f_36" style="color: #ff6401">￥5.90</view>
                    </view>
                    <view class="f_28 cl_3377FF">
                        已超时
                        <text class="cl_FF6401">2分钟</text>
                        ，请尽快前往
                    </view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                </view>
                <view class="flex">
                    <view class="phoneBtn">
                        <!--  -->
                        <view style="text-align: center">
                            <image class="icon_dh" src="@/static/imgs/icon-dh.png" mode="widthFix"></image>
                            客户
                        </view>
                    </view>
                    <view class="addBtn1" @click="OrderDetailsReceiver(1)">已到达目的地</view>
                </view>
            </view>

            <!-- 已完成 -->
            <view class="back_fff list">
                <view @click="OrderCompletion(0)">
                    <view class="flex justify_content_between">
                        <view class="flex">
                            <view class="type f_28" style="color: #3377ff">已完成</view>
                        </view>
                        <view class="f_28 cl_CCCED1">2022-12-15 12:12:25</view>
                    </view>
                    <view class="flex justify_content_between pt_24">
                        <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                        <view class="title">超威电池专卖店(青山路店)</view>
                    </view>
                    <view class="flex justify_content_between pt_24">
                        <view class="round" style="background: #f7faff; color: #3377ff">目</view>
                        <view class="title">贵阳市南明区花果园金融街1号1824</view>
                    </view>
                    <view class="mt_24">
                        <text class="f_28">王先生</text>
                        <text class="iphone cl_999CA3 f_28">156****5412</text>
                    </view>
                    <view class="flex justify_content_end">
                        <view class="f_28">
                            佣金
                            <text class="cl_FF6401">￥2500.05</text>
                        </view>
                    </view>
                </view>

                <view class="flex justify_content_end">
                    <view class="delete">删除订单</view>
                </view>
            </view>
            <!-- 已完成，申诉 -->
            <view class="back_fff list" @click="OrderCompletion(1)">
                <view class="flex justify_content_between">
                    <view class="flex">
                        <view class="type f_28" style="color: #3377ff">已完成</view>
                    </view>
                    <view class="f_28 cl_CCCED1">2022-12-15 12:12:25</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                </view>
                <view class="flex justify_content_end">
                    <view class="f_28 cl_FF6401">用户取消订单</view>
                </view>
                <view class="flex justify_content_end">
                    <view class="delete">删除订单</view>
                    <view class="delete" style="background: #3377ff; color: white; margin-left: 24rpx" @click="InAppeal">去申诉</view>
                </view>
            </view>
            <!-- 已完成，申诉中 -->
            <view class="back_fff list">
                <view class="flex justify_content_between">
                    <view class="flex">
                        <view class="type f_28" style="color: #3377ff">已完成</view>
                    </view>
                    <view class="f_28 cl_CCCED1">2022-12-15 12:12:25</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">车</view>
                    <view class="title">超威电池专卖店(青山路店)</view>
                </view>
                <view class="flex justify_content_between pt_24">
                    <view class="round" style="background: #f7faff; color: #3377ff">目</view>
                    <view class="title">贵阳市南明区花果园金融街1号1824</view>
                </view>
                <view class="mt_24">
                    <text class="f_28">王先生</text>
                    <text class="iphone cl_999CA3 f_28">156****5412</text>
                </view>
                <view class="flex justify_content_end">
                    <view class="f_28 cl_FF6401">用户取消订单，订单申诉中</view>
                </view>
                <view class="flex justify_content_end">
                    <view class="delete">取消申诉</view>
                    <view class="delete" @click="InAppealinfo" style="background: #3377ff; color: white; margin-left: 24rpx">申诉详情</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'jdy-trailer-battery-item',
    data() {
        return {};
    },
    methods: {
        OrderDetailsReceiver(type) {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/TrailerOrder/TrailerDetails?type=' + type
            });
        },
        InAppeal() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/TrailerOrder/appeal'
            });
        },
        InAppealinfo() {
            uni.navigateTo({
                url: '/pages/OrderReceiverTerminal/TrailerOrder/InAppeal'
            });
        },
        buy() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/MallToBePaid'
            });
        },
        CancelOrder() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/CancelOrder'
            });
        },
        orderInfo() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/BatteryToBePaid'
            });
        },
        // 待发货详情
        details(type) {
            console.log(1);
            if (this.ProductType == 0) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/MallToBePaid?type=' + type
                });
            }
            if (this.ProductType == 1) {
                uni.navigateTo({
                    url: '/pages/me/MyOrder/BatteryCompleted'
                });
            }
        },
        // 售后详情
        details1() {
            uni.navigateTo({
                url: '/pages/business/AfterSales'
            });
        },
        // 查看评价
        evaluea() {
            uni.navigateTo({
                url: '/pages/me/MyOrder/orderEvaluation'
            });
        },
        // 查看物流
        loginst() {
            console.log(1);
            uni.navigateTo({
                url: '/pages/business/LogisticsInformation'
            });
        },
        add() {
            uni.navigateTo({
                url: '/pages/business/addProduct'
            });
        },
        add_zc() {
            uni.navigateTo({
                url: '/pages/business/CarRental'
            });
        }
    }
};
</script>

<style lang="scss">
.delete {
    width: 160rpx;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #ccced1;
    text-align: center;
    color: #666b75;
    margin-top: 36rpx;
}
.search {
    width: 35rpx;
    height: 35rpx;
    margin-top: 20rpx;
    margin-left: 28rpx;
}
.active {
    color: #3377ff;
}
.bottonTab {
    height: 100rpx;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding-bottom: 20rpx;
    padding-top: 20rpx;
}
.tabitem {
    width: 50%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    font-size: 28rpx;
    color: #ccced1;
}
.tabIcon {
    width: 40rpx;
    height: 40rpx;
    display: block;
    margin: 0 auto;
}
.addBtn {
    width: 638rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: #3377ff;
    border-radius: 16rpx;
    margin-top: 24rpx;
    color: white;
}
.icon_dh {
    width: 28rpx;
    height: 28rpx;
    margin-right: 12rpx;
}
.titleTip {
    width: 40rpx;
    height: 40rpx;
    background: #ff6401;
    color: white;
    border-radius: 8rpx;
    font-size: 24rpx;
    text-align: center;
}
.phoneBtn {
    width: 230rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #f7f7f7;
    border-radius: 16rpx;
    margin-top: 24rpx;
    margin-right: 24rpx;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.addBtn1 {
    width: 384rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: #3377ff;
    border-radius: 16rpx;
    margin-top: 24rpx;
    color: white;
}
.smaz {
    width: 112rpx;
    height: 48rpx;
    background: #3377ff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    color: white;
    font-size: 28rpx;
    text-align: center;
    padding: 8rpx;
    margin-left: 24rpx;
}
.box {
    padding: 0 32rpx;
}
.tipbox {
    background: #f7f7f7;
    border-radius: 8rpx;
    color: #666b75;
    font-size: 28rpx;
    padding: 8rpx;
}
.tip {
    padding: 16rpx;
    border-radius: 8rpx;
}
.tipActive {
    background: white;
    color: #00091a;
    padding: 16rpx;
    border-radius: 8rpx;
}
.tab {
    color: #999ca3;
    font-size: 28rpx;
    margin: 19rpx;
}
.tabActive {
    color: #3377ff;
    font-size: 32rpx;
    margin: 19rpx;
    font-weight: bold;
}
.list {
    padding: 24rpx;
    border-radius: 24rpx;
    margin-top: 24rpx;
    .round {
        width: 40rpx;
        height: 40rpx;
        border-radius: 16rpx;
        background: #00091a;
        font-size: 28rpx;
        color: white;
        text-align: center;
        line-height: 40rpx;
    }
    .type {
        color: #3377ff;
        font-weight: bold;
    }
    .time {
        color: #ccced1;
    }
    .title {
        width: 90%;
        color: #00091a;
        font-size: 32rpx;
        font-weight: bold;
    }
    .address {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .name {
        font-weight: normal;
        color: #333a47;
        margin-right: 24rpx;
    }
    .iphone {
        font-weight: normal;
        color: #999ca3;
    }
    .money {
        text-align: right;
        color: #666b75;
    }
    .money text {
        color: #ff6401;
        font-weight: bold;
        font-size: 32rpx;
    }
    .btn {
        text-align: right;
    }
    .cance {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #666b75;
        text-align: center;
        border: 2rpx solid #ccced1;
        margin-top: 24rpx;
    }
    .buy {
        width: 160rpx;
        height: 68rpx;
        line-height: 68rpx;
        border-radius: 8rpx;
        color: #ffffff;
        text-align: center;
        background: #3377ff;
        margin-left: 24rpx;
        margin-top: 24rpx;
    }
}
</style>
